<template>
  <div class="todo-container">
    <a-card class="todo-card" :bordered="false">
      <template #title>
        <div class="card-title">
          <div class="title-section">
            <span class="title-text">我的待办</span>
            <div class="todo-stats">
              <span class="todo-count">{{ filteredTodos.length }} 项任务</span>
              <a-tooltip title="查看任务统计">
                <a-button type="link" @click="showStatsModal" class="stats-button">
                  <template #icon><bar-chart-outlined /></template>
                </a-button>
              </a-tooltip>
            </div>
          </div>
          <div class="action-buttons">
            <a-input-search
              v-model:value="searchText"
              placeholder="搜索待办事项"
              style="width: 200px; margin-right: 10px;"
              @search="onSearch"
              allowClear
            />
            <a-dropdown>
              <a-button type="primary" class="add-button" shape="round">
                <template #icon><plus-outlined /></template>
                添加待办
              </a-button>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1" @click="showAddModal">
                    <template #icon><plus-outlined /></template>
                    新建任务
                  </a-menu-item>
                  <a-menu-item key="2" @click="showImportModal">
                    <template #icon><import-outlined /></template>
                    导入任务
                  </a-menu-item>
                  <a-menu-item key="3" @click="exportTodos">
                    <template #icon><export-outlined /></template>
                    导出任务
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </template>
      
      <div class="filter-section">
        <a-select
          v-model:value="filterCategory"
          style="width: 120px; margin-right: 10px;"
          placeholder="分类筛选"
          allowClear
        >
          <a-select-option value="">全部分类</a-select-option>
          <a-select-option v-for="category in categories" :key="category" :value="category">
            {{ category }}
          </a-select-option>
        </a-select>
        
        <a-select
          v-model:value="filterPriority"
          style="width: 120px; margin-right: 10px;"
          placeholder="优先级筛选"
          allowClear
        >
          <a-select-option value="">全部优先级</a-select-option>
          <a-select-option value="high">高优先级</a-select-option>
          <a-select-option value="medium">中优先级</a-select-option>
          <a-select-option value="low">低优先级</a-select-option>
        </a-select>
        
        <a-select
          v-model:value="filterStatus"
          style="width: 120px; margin-right: 10px;"
          placeholder="状态筛选"
          allowClear
        >
          <a-select-option value="">全部状态</a-select-option>
          <a-select-option value="completed">已完成</a-select-option>
          <a-select-option value="pending">未完成</a-select-option>
        </a-select>

        <a-select
          v-model:value="filterTags"
          mode="multiple"
          style="width: 200px;"
          placeholder="标签筛选"
          allowClear
        >
          <a-select-option v-for="tag in allTags" :key="tag" :value="tag">
            {{ tag }}
          </a-select-option>
        </a-select>
      </div>
      
      <a-list
        :data-source="filteredTodos"
        :bordered="false"
        class="todo-list"
        :locale="{ emptyText: '暂无待办事项' }"
      >
        <template #renderItem="{ item, index }">
          <a-list-item>
            <div class="todo-item" :class="{ 
              'todo-item-completed': item.completed,
              'todo-item-high': item.priority === 'high',
              'todo-item-medium': item.priority === 'medium',
              'todo-item-low': item.priority === 'low'
            }">
              <div class="todo-number">{{ index + 1 }}</div>
              <div class="todo-order">
                <a-button 
                  type="text" 
                  size="small" 
                  @click="moveTodo(index, 'up')"
                  :disabled="index === 0"
                >
                  <up-outlined />
                </a-button>
                <a-button 
                  type="text" 
                  size="small" 
                  @click="moveTodo(index, 'down')"
                  :disabled="index === filteredTodos.length - 1"
                >
                  <down-outlined />
                </a-button>
              </div>
              <a-checkbox
                :checked="item.completed"
                @change="(e) => toggleTodo(item.id, e.target.checked)"
                class="todo-checkbox"
              />
              <div class="todo-content">
                <span :class="{ completed: item.completed }" class="todo-text">{{ item.text }}</span>
                <div class="todo-meta">
                  <a-tag v-if="item.category" color="blue">{{ item.category }}</a-tag>
                  <a-tag v-if="item.priority === 'high'" color="red">高优先级</a-tag>
                  <a-tag v-if="item.priority === 'medium'" color="orange">中优先级</a-tag>
                  <a-tag v-if="item.priority === 'low'" color="green">低优先级</a-tag>
                  <template v-for="tag in item.tags" :key="tag">
                    <a-tag color="purple">{{ tag }}</a-tag>
                  </template>
                  <span v-if="item.dueDate" class="due-date" :class="{ 'overdue': isOverdue(item.dueDate) }">
                    <calendar-outlined /> {{ formatDate(item.dueDate) }}
                  </span>
                </div>
              </div>
              <div class="todo-actions">
                <a-button
                  type="text"
                  @click="editTodo(item)"
                  class="edit-button"
                  shape="circle"
                >
                  <template #icon><edit-outlined /></template>
                </a-button>
                <a-button
                  type="text"
                  danger
                  @click="deleteTodo(item.id)"
                  class="delete-button"
                  shape="circle"
                >
                  <template #icon><delete-outlined /></template>
                </a-button>
              </div>
            </div>
          </a-list-item>
        </template>
      </a-list>
    </a-card>

    <a-modal
      v-model:visible="modalVisible"
      :title="isEditing ? '编辑待办事项' : '添加待办事项'"
      @ok="handleAddTodo"
      @cancel="handleCancel"
      :width="modalWidth"
      :okText="isEditing ? '保存' : '添加'"
      :cancelText="'取消'"
      class="todo-modal"
    >
      <a-form layout="vertical">
        <a-form-item label="待办内容">
          <a-input
            v-model:value="newTodo.text"
            placeholder="请输入待办事项"
            class="todo-input"
            size="large"
            :maxLength="50"
            show-count
          />
        </a-form-item>
        
        <a-form-item label="分类">
          <a-select
            v-model:value="newTodo.category"
            placeholder="选择分类"
            style="width: 100%"
            allowClear
          >
            <a-select-option v-for="category in categories" :key="category" :value="category">
              {{ category }}
            </a-select-option>
            <a-select-option value="new">+ 新建分类</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item v-if="newTodo.category === 'new'" label="新分类名称">
          <a-input
            v-model:value="newCategory"
            placeholder="请输入新分类名称"
            class="todo-input"
          />
        </a-form-item>
        
        <a-form-item label="优先级">
          <a-radio-group v-model:value="newTodo.priority">
            <a-radio value="low">低</a-radio>
            <a-radio value="medium">中</a-radio>
            <a-radio value="high">高</a-radio>
          </a-radio-group>
        </a-form-item>
        
        <a-form-item label="标签">
          <a-select
            v-model:value="newTodo.tags"
            mode="tags"
            style="width: 100%"
            placeholder="添加标签"
            :token-separators="[',']"
          >
            <a-select-option v-for="tag in allTags" :key="tag" :value="tag">
              {{ tag }}
            </a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="截止日期">
          <a-date-picker
            v-model:value="newTodo.dueDate"
            style="width: 100%"
            :disabledDate="disabledDate"
            placeholder="选择截止日期"
          />
        </a-form-item>

        <a-form-item label="提醒时间">
          <a-time-picker
            v-model:value="newTodo.reminderTime"
            style="width: 100%"
            format="HH:mm"
            placeholder="选择提醒时间"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-modal
      v-model:visible="statsModalVisible"
      title="任务统计"
      @cancel="statsModalVisible = false"
      :footer="null"
      width="800px"
      class="stats-modal"
    >
      <div class="stats-container">
        <div class="stats-cards">
          <a-card class="stats-card">
            <template #title>任务完成情况</template>
            <div class="stats-chart">
              <div class="progress-circle" :style="{ '--percentage': completionRate }">
                <span class="progress-text">{{ Math.round(completionRate) }}%</span>
              </div>
              <div class="stats-details">
                <div class="stats-detail-item">
                  <span class="stats-detail-label">总任务</span>
                  <span class="stats-detail-value">{{ todos.length }}</span>
                </div>
                <div class="stats-detail-item">
                  <span class="stats-detail-label">已完成</span>
                  <span class="stats-detail-value">{{ completedCount }}</span>
                </div>
                <div class="stats-detail-item">
                  <span class="stats-detail-label">未完成</span>
                  <span class="stats-detail-value">{{ pendingCount }}</span>
                </div>
              </div>
            </div>
          </a-card>

          <a-card class="stats-card">
            <template #title>优先级分布</template>
            <div class="priority-stats">
              <div class="priority-bar-container">
                <div class="priority-label">
                  <span>高优先级</span>
                  <span class="priority-count">{{ highPriorityCount }}</span>
                </div>
                <div class="priority-bar-wrapper">
                  <div class="priority-bar high" :style="{ width: highPriorityRate + '%' }">
                    <span class="priority-bar-text">{{ Math.round(highPriorityRate) }}%</span>
                  </div>
                </div>
              </div>
              <div class="priority-bar-container">
                <div class="priority-label">
                  <span>中优先级</span>
                  <span class="priority-count">{{ mediumPriorityCount }}</span>
                </div>
                <div class="priority-bar-wrapper">
                  <div class="priority-bar medium" :style="{ width: mediumPriorityRate + '%' }">
                    <span class="priority-bar-text">{{ Math.round(mediumPriorityRate) }}%</span>
                  </div>
                </div>
              </div>
              <div class="priority-bar-container">
                <div class="priority-label">
                  <span>低优先级</span>
                  <span class="priority-count">{{ lowPriorityCount }}</span>
                </div>
                <div class="priority-bar-wrapper">
                  <div class="priority-bar low" :style="{ width: lowPriorityRate + '%' }">
                    <span class="priority-bar-text">{{ Math.round(lowPriorityRate) }}%</span>
                  </div>
                </div>
              </div>
            </div>
          </a-card>

          <a-card class="stats-card">
            <template #title>分类统计</template>
            <div class="category-stats">
              <div v-for="category in categories" :key="category" class="category-item">
                <span class="category-name">{{ category }}</span>
                <span class="category-count">
                  {{ getCategoryCount(category) }}
                  <span class="category-percent">
                    ({{ Math.round((getCategoryCount(category) / todos.length) * 100) }}%)
                  </span>
                </span>
              </div>
            </div>
          </a-card>

          <a-card class="stats-card">
            <template #title>标签统计</template>
            <div class="tag-stats">
              <div v-for="tag in allTags" :key="tag" class="tag-stat">
                <span class="tag-name">{{ tag }}</span>
                <span class="tag-count">{{ getTagCount(tag) }}</span>
              </div>
            </div>
          </a-card>
        </div>
      </div>
    </a-modal>

    <a-modal
      v-model:visible="importModalVisible"
      title="导入任务"
      @ok="handleImport"
      @cancel="importModalVisible = false"
    >
      <a-upload
        accept=".json"
        :beforeUpload="beforeImport"
        :showUploadList="false"
      >
        <a-button>
          <template #icon><upload-outlined /></template>
          选择文件
        </a-button>
      </a-upload>
      <div class="import-preview" v-if="importData">
        <h4>预览数据:</h4>
        <pre>{{ JSON.stringify(importData, null, 2) }}</pre>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch, nextTick, onUnmounted } from 'vue'
import { 
  PlusOutlined, 
  DeleteOutlined, 
  EditOutlined, 
  CalendarOutlined,
  MenuOutlined,
  BarChartOutlined,
  ImportOutlined,
  ExportOutlined,
  UploadOutlined,
  UpOutlined,
  DownOutlined
} from '@ant-design/icons-vue'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import { useIntersectionObserver } from '@vueuse/core'
import { debounce } from 'lodash-es'

// 虚拟列表相关
const virtualListRef = ref(null)
const itemHeight = 120 // 预估的每个任务项高度
const visibleCount = computed(() => Math.ceil(window.innerHeight / itemHeight) + 2)

// 延迟加载和防抖
const debouncedSearch = debounce((value) => {
  searchText.value = value
}, 300)

// 优化数据加载
const loadTodos = () => {
  try {
    const savedTodos = localStorage.getItem('todos')
    return savedTodos ? JSON.parse(savedTodos) : []
  } catch (error) {
    console.error('Error loading todos:', error)
    return []
  }
}

// 优化数据保存
const saveTodos = debounce((todos) => {
  try {
    localStorage.setItem('todos', JSON.stringify(todos))
  } catch (error) {
    console.error('Error saving todos:', error)
  }
}, 1000)

// 从本地存储加载分类
const loadCategories = () => {
  const savedCategories = localStorage.getItem('categories')
  return savedCategories ? JSON.parse(savedCategories) : ['工作', '生活', '学习']
}

// 保存分类到本地存储
const saveCategories = (categories) => {
  localStorage.setItem('categories', JSON.stringify(categories))
}

// 从本地存储加载标签
const loadTags = () => {
  const savedTags = localStorage.getItem('tags')
  return savedTags ? JSON.parse(savedTags) : []
}

// 保存标签到本地存储
const saveTags = (tags) => {
  localStorage.setItem('tags', JSON.stringify(tags))
}

const todos = ref(loadTodos())
const categories = ref(loadCategories())
const allTags = ref(loadTags())
const modalVisible = ref(false)
const statsModalVisible = ref(false)
const importModalVisible = ref(false)
const isEditing = ref(false)
const editingId = ref(null)
const searchText = ref('')
const filterCategory = ref('')
const filterPriority = ref('')
const filterStatus = ref('')
const filterTags = ref([])
const newCategory = ref('')
const importData = ref(null)

const newTodo = ref({
  text: '',
  category: '',
  priority: 'medium',
  dueDate: null,
  tags: [],
  reminderTime: null
})

// 监听待办事项变化，自动保存到本地存储
watch(todos, (newTodos) => {
  saveTodos(newTodos)
  updateTags()
}, { deep: true })

// 监听分类变化，自动保存到本地存储
watch(categories, (newCategories) => {
  saveCategories(newCategories)
}, { deep: true })

// 监听标签变化，自动保存到本地存储
watch(allTags, (newTags) => {
  saveTags(newTags)
}, { deep: true })

// 更新标签列表
const updateTags = () => {
  const tags = new Set()
  todos.value.forEach(todo => {
    if (todo.tags) {
      todo.tags.forEach(tag => tags.add(tag))
    }
  })
  allTags.value = Array.from(tags)
}

// 根据屏幕宽度计算模态框宽度
const modalWidth = computed(() => {
  return window.innerWidth < 576 ? '90%' : '600px'
})

// 过滤待办事项
const filteredTodos = computed(() => {
  return todos.value.filter(todo => {
    // 搜索文本过滤
    if (searchText.value && !todo.text.toLowerCase().includes(searchText.value.toLowerCase())) {
      return false
    }
    
    // 分类过滤
    if (filterCategory.value && todo.category !== filterCategory.value) {
      return false
    }
    
    // 优先级过滤
    if (filterPriority.value && todo.priority !== filterPriority.value) {
      return false
    }
    
    // 状态过滤
    if (filterStatus.value === 'completed' && !todo.completed) {
      return false
    }
    if (filterStatus.value === 'pending' && todo.completed) {
      return false
    }

    // 标签过滤
    if (filterTags.value.length > 0) {
      if (!todo.tags || !filterTags.value.every(tag => todo.tags.includes(tag))) {
        return false
      }
    }
    
    return true
  })
})

// 统计计算
const completedCount = computed(() => todos.value.filter(t => t.completed).length)
const pendingCount = computed(() => todos.value.filter(t => !t.completed).length)
const completionRate = computed(() => (completedCount.value / todos.value.length) * 100 || 0)

const highPriorityCount = computed(() => todos.value.filter(t => t.priority === 'high').length)
const mediumPriorityCount = computed(() => todos.value.filter(t => t.priority === 'medium').length)
const lowPriorityCount = computed(() => todos.value.filter(t => t.priority === 'low').length)

const highPriorityRate = computed(() => (highPriorityCount.value / todos.value.length) * 100 || 0)
const mediumPriorityRate = computed(() => (mediumPriorityCount.value / todos.value.length) * 100 || 0)
const lowPriorityRate = computed(() => (lowPriorityCount.value / todos.value.length) * 100 || 0)

// 获取分类任务数量
const getCategoryCount = (category) => {
  return todos.value.filter(t => t.category === category).length
}

// 获取标签任务数量
const getTagCount = (tag) => {
  return todos.value.filter(t => t.tags && t.tags.includes(tag)).length
}

// 检查是否过期
const isOverdue = (dateString) => {
  return dayjs(dateString).isBefore(dayjs(), 'day')
}

const showAddModal = () => {
  isEditing.value = false
  editingId.value = null
  newTodo.value = {
    text: '',
    category: '',
    priority: 'medium',
    dueDate: null,
    tags: [],
    reminderTime: null
  }
  newCategory.value = ''
  modalVisible.value = true
}

const showStatsModal = () => {
  statsModalVisible.value = true
}

const showImportModal = () => {
  importModalVisible.value = true
  importData.value = null
}

const editTodo = (todo) => {
  isEditing.value = true
  editingId.value = todo.id
  newTodo.value = {
    text: todo.text,
    category: todo.category,
    priority: todo.priority || 'medium',
    dueDate: todo.dueDate ? dayjs(todo.dueDate) : null,
    tags: todo.tags || [],
    reminderTime: todo.reminderTime ? dayjs(todo.reminderTime, 'HH:mm') : null
  }
  newCategory.value = ''
  modalVisible.value = true
}

const handleAddTodo = async () => {
  try {
    if (newTodo.value.text.trim()) {
      // 处理新分类
      if (newTodo.value.category === 'new' && newCategory.value.trim()) {
        const categoryName = newCategory.value.trim()
        if (!categories.value.includes(categoryName)) {
          categories.value.push(categoryName)
        }
        newTodo.value.category = categoryName
      }
      
      if (isEditing.value) {
        // 更新现有待办事项
        const index = todos.value.findIndex(t => t.id === editingId.value)
        if (index !== -1) {
          todos.value[index] = {
            ...todos.value[index],
            text: newTodo.value.text,
            category: newTodo.value.category,
            priority: newTodo.value.priority,
            dueDate: newTodo.value.dueDate ? newTodo.value.dueDate.format('YYYY-MM-DD') : null,
            tags: newTodo.value.tags,
            reminderTime: newTodo.value.reminderTime ? newTodo.value.reminderTime.format('HH:mm') : null,
            updatedAt: new Date().toISOString()
          }
        }
      } else {
        // 添加新待办事项
        todos.value.push({
          id: Date.now(),
          text: newTodo.value.text,
          category: newTodo.value.category,
          priority: newTodo.value.priority,
          dueDate: newTodo.value.dueDate ? newTodo.value.dueDate.format('YYYY-MM-DD') : null,
          tags: newTodo.value.tags,
          reminderTime: newTodo.value.reminderTime ? newTodo.value.reminderTime.format('HH:mm') : null,
          completed: false,
          createdAt: new Date().toISOString()
        })
      }
      
      modalVisible.value = false
    }
  } catch (error) {
    handleError(error)
  }
}

const handleCancel = () => {
  newTodo.value = {
    text: '',
    category: '',
    priority: 'medium',
    dueDate: null,
    tags: [],
    reminderTime: null
  }
  newCategory.value = ''
  modalVisible.value = false
}

const toggleTodo = (id, checked) => {
  const todo = todos.value.find(t => t.id === id)
  if (todo) {
    todo.completed = checked
    todo.updatedAt = new Date().toISOString()
  }
}

const deleteTodo = (id) => {
  todos.value = todos.value.filter(t => t.id !== id)
}

const onSearch = (value) => {
  debouncedSearch(value)
}

const formatDate = (dateString) => {
  return dayjs(dateString).format('YYYY-MM-DD')
}

const disabledDate = (current) => {
  return current && current < dayjs().startOf('day')
}

const moveTodo = (index, direction) => {
  // 获取过滤后的任务列表
  const filteredList = filteredTodos.value
  
  // 获取被移动的任务
  const itemToMove = filteredList[index]
  
  // 找到该任务在原始数组中的索引
  const originalIndex = todos.value.findIndex(t => t.id === itemToMove.id)
  
  if (originalIndex !== -1) {
    if (direction === 'up' && index > 0) {
      // 找到目标位置的任务
      const targetItem = filteredList[index - 1]
      const targetIndex = todos.value.findIndex(t => t.id === targetItem.id)
      
      // 交换位置
      if (targetIndex !== -1) {
        const temp = todos.value[originalIndex]
        todos.value[originalIndex] = todos.value[targetIndex]
        todos.value[targetIndex] = temp
      }
    } else if (direction === 'down' && index < filteredList.length - 1) {
      // 找到目标位置的任务
      const targetItem = filteredList[index + 1]
      const targetIndex = todos.value.findIndex(t => t.id === targetItem.id)
      
      // 交换位置
      if (targetIndex !== -1) {
        const temp = todos.value[originalIndex]
        todos.value[originalIndex] = todos.value[targetIndex]
        todos.value[targetIndex] = temp
      }
    }
    
    // 强制更新视图
    todos.value = [...todos.value]
  }
}

// 导出任务
const exportTodos = () => {
  // 导出时移除内部使用的字段
  const exportData = todos.value.map(({ id, createdAt, updatedAt, ...rest }) => rest)
  const data = JSON.stringify(exportData, null, 2)
  const blob = new Blob([data], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = `todos-${dayjs().format('YYYY-MM-DD')}.json`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
}

// 导入任务
const beforeImport = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    try {
      const data = JSON.parse(e.target.result)
      importData.value = data
    } catch (error) {
      message.error('无效的JSON文件')
    }
  }
  reader.readAsText(file)
  return false
}

const handleImport = () => {
  if (importData.value) {
    // 为导入的任务添加唯一ID和时间戳
    const importedTodos = importData.value.map(todo => ({
      ...todo,
      id: Date.now() + Math.random(), // 确保ID唯一
      createdAt: todo.createdAt || new Date().toISOString(),
      updatedAt: todo.updatedAt || new Date().toISOString()
    }))
    
    todos.value = [...todos.value, ...importedTodos]
    message.success('导入成功')
    importModalVisible.value = false
  }
}

// 检查提醒
const checkReminders = () => {
  const now = dayjs()
  todos.value.forEach(todo => {
    if (!todo.completed && todo.reminderTime && todo.dueDate) {
      const reminderDateTime = dayjs(`${todo.dueDate} ${todo.reminderTime}`, 'YYYY-MM-DD HH:mm')
      if (reminderDateTime.isSame(now, 'minute')) {
        // 显示提醒
        if (Notification.permission === 'granted') {
          new Notification('待办提醒', {
            body: todo.text,
            icon: '/favicon.ico'
          })
        }
      }
    }
  })
}

// 添加错误边界
const handleError = (error) => {
  console.error('Application error:', error)
  message.error('操作失败，请重试')
}

// 优化列表渲染
const visibleTodos = computed(() => {
  const start = Math.max(0, scrollTop.value / itemHeight - 1)
  const end = Math.min(filteredTodos.value.length, start + visibleCount.value)
  return filteredTodos.value.slice(start, end)
})

// 添加性能监控
onMounted(() => {
  // 监控性能指标
  if (window.performance) {
    const timing = window.performance.timing
    const loadTime = timing.loadEventEnd - timing.navigationStart
    console.log(`Page load time: ${loadTime}ms`)
  }
  
  // 预加载常用数据
  nextTick(() => {
    updateTags()
    checkReminders()
  })
})

// 优化移动端性能
const isMobile = computed(() => window.innerWidth <= 768)
const isSmallScreen = computed(() => window.innerWidth <= 480)

// 添加页面可见性检测
const handleVisibilityChange = () => {
  if (document.hidden) {
    // 页面隐藏时保存数据
    saveTodos(todos.value)
  }
}

onMounted(() => {
  document.addEventListener('visibilitychange', handleVisibilityChange)
})

onUnmounted(() => {
  document.removeEventListener('visibilitychange', handleVisibilityChange)
})
</script>

<style scoped>
.todo-container {
  width: 100%;
  max-width: 1200px;
  margin: 32px auto;
  padding: 0 24px;
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.todo-card {
  border-radius: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  width: 100%;
  background: linear-gradient(to bottom right, #ffffff, #fafafa);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.todo-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 32px 40px;
  background: linear-gradient(to right, #ffffff, #f8f9fa);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.9);
}

.title-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.title-text {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(45deg, #1a1a1a, #333333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
  line-height: 1.2;
  position: relative;
}

.title-text::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #2196f3, #1976d2);
  border-radius: 2px;
}

.todo-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.todo-count {
  font-size: 1.1rem;
  color: #666666;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.04);
  padding: 6px 16px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.todo-count:hover {
  background: rgba(33, 150, 243, 0.1);
  color: #1976d2;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.add-button {
  height: 52px;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 26px;
  background: linear-gradient(45deg, #2196f3, #1976d2);
  border: none;
  padding: 0 32px;
  position: relative;
  overflow: hidden;
}

.add-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

.add-button:hover::before {
  left: 100%;
}

.add-button:hover {
  background: linear-gradient(45deg, #1976d2, #1565c0);
  box-shadow: 0 6px 16px rgba(33, 150, 243, 0.3);
  transform: translateY(-2px);
}

.filter-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 32px 40px;
  padding: 24px;
  background: linear-gradient(to right, #f8f9fa, #ffffff);
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 120px;
  z-index: 9;
  backdrop-filter: blur(10px);
  background: rgba(248, 249, 250, 0.9);
}

.todo-list {
  margin: 0 40px 40px;
  width: calc(100% - 80px);
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.todo-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px 32px;
  border-radius: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(to right, #ffffff, #fafafa);
  margin-bottom: 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.todo-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #2196f3, #1976d2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.todo-item:hover::before {
  opacity: 1;
}

.todo-item:hover {
  background: linear-gradient(to right, #fafafa, #f5f5f5);
  transform: translateX(6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.todo-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(45deg, #e3f2fd, #bbdefb);
  color: #1976d2;
  font-size: 1rem;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
  transition: all 0.3s ease;
}

.todo-item:hover .todo-number {
  transform: scale(1.1);
  background: linear-gradient(45deg, #bbdefb, #90caf9);
}

.todo-content {
  flex: 1;
  min-width: 0;
  padding: 0 12px;
}

.todo-text {
  display: block;
  word-break: break-word;
  min-width: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: #1a1a1a;
  transition: all 0.2s ease;
  margin-bottom: 12px;
  line-height: 1.5;
  position: relative;
}

.todo-text.completed {
  text-decoration: line-through;
  color: #666666;
  opacity: 0.7;
}

.todo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.todo-meta :deep(.ant-tag) {
  margin: 0;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.todo-meta :deep(.ant-tag)::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

.todo-meta :deep(.ant-tag:hover)::before {
  left: 100%;
}

.todo-meta :deep(.ant-tag-blue) {
  background: rgba(33, 150, 243, 0.1);
  color: #1976d2;
}

.todo-meta :deep(.ant-tag-red) {
  background: rgba(244, 67, 54, 0.1);
  color: #d32f2f;
}

.todo-meta :deep(.ant-tag-orange) {
  background: rgba(255, 152, 0, 0.1);
  color: #f57c00;
}

.todo-meta :deep(.ant-tag-green) {
  background: rgba(76, 175, 80, 0.1);
  color: #388e3c;
}

.todo-meta :deep(.ant-tag-purple) {
  background: rgba(156, 39, 176, 0.1);
  color: #7b1fa2;
}

.todo-meta :deep(.ant-tag:hover) {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.due-date {
  color: #666666;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 20px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.due-date::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

.due-date:hover::before {
  left: 100%;
}

.due-date:hover {
  background: rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.due-date.overdue {
  color: #f44336;
  background: rgba(244, 67, 54, 0.1);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(244, 67, 54, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
  }
}

.due-date.overdue:hover {
  background: rgba(244, 67, 54, 0.15);
}

.todo-actions {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.edit-button, .delete-button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.edit-button::before, .delete-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

.edit-button:hover::before, .delete-button:hover::before {
  left: 100%;
}

.edit-button:hover {
  background: linear-gradient(45deg, rgba(33, 150, 243, 0.1), rgba(33, 150, 243, 0.2));
  color: #2196f3;
  transform: translateY(-2px);
}

.delete-button:hover {
  background: linear-gradient(45deg, rgba(244, 67, 54, 0.1), rgba(244, 67, 54, 0.2));
  color: #f44336;
  transform: translateY(-2px);
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .todo-card {
    background: linear-gradient(to bottom right, #1a1a1a, #2d2d2d);
  }
  
  .card-title {
    background: rgba(26, 26, 26, 0.9);
  }
  
  .title-text {
    background: linear-gradient(45deg, #ffffff, #cccccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .todo-count {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }
  
  .filter-section {
    background: rgba(45, 45, 45, 0.9);
  }
  
  .todo-item {
    background: linear-gradient(to right, #2d2d2d, #1a1a1a);
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .todo-text {
    color: #ffffff;
  }
  
  .todo-text.completed {
    color: #999999;
  }
  
  .todo-meta :deep(.ant-tag) {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .due-date {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }
}

/* 打印样式优化 */
@media print {
  .todo-container {
    margin: 0;
    padding: 0;
  }
  
  .todo-card {
    box-shadow: none;
    border: 1px solid #000;
  }
  
  .action-buttons,
  .todo-actions {
    display: none;
  }
  
  .todo-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* 无障碍优化 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* 高对比度模式支持 */
@media (forced-colors: active) {
  .todo-item {
    border: 2px solid CanvasText;
  }
  
  .todo-meta :deep(.ant-tag) {
    border: 1px solid CanvasText;
  }
}

@media (max-width: 768px) {
  .todo-container {
    padding: 0 16px;
    margin: 16px auto;
  }
  
  .card-title {
    padding: 16px;
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  
  .title-text {
    font-size: 1.75rem;
  }
  
  .title-text::after {
    width: 40px;
  }
  
  .action-buttons {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }
  
  .action-buttons .ant-input-search {
    width: 100%;
    margin-right: 0;
  }
  
  .add-button {
    width: 100%;
    height: 44px;
    font-size: 1rem;
  }
  
  .filter-section {
    margin: 12px;
    padding: 12px;
    flex-direction: column;
    position: sticky;
    top: 120px;
    z-index: 9;
  }
  
  .filter-section .ant-select {
    width: 100% !important;
    margin-right: 0 !important;
  }
  
  .todo-list {
    margin: 0 12px 16px;
    width: calc(100% - 24px);
  }
  
  .todo-item {
    padding: 16px;
    gap: 12px;
  }
  
  .todo-content {
    width: 100%;
    order: 1;
  }
  
  .todo-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    width: 100%;
  }
  
  .todo-meta :deep(.ant-tag) {
    width: 100%;
    text-align: center;
    padding: 6px 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .due-date {
    width: 100%;
    justify-content: center;
    padding: 6px 8px;
    font-size: 0.8rem;
  }
  
  .todo-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 12px;
    gap: 8px;
  }
  
  .todo-order {
    order: 2;
    display: flex;
    gap: 4px;
  }
  
  .todo-number {
    order: 3;
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  
  .todo-checkbox {
    order: 4;
  }
  
  .edit-button, .delete-button {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 480px) {
  .todo-container {
    padding: 0 12px;
    margin: 12px auto;
  }
  
  .card-title {
    padding: 12px;
  }
  
  .title-text {
    font-size: 1.5rem;
  }
  
  .title-text::after {
    width: 30px;
  }
  
  .todo-count {
    font-size: 0.9rem;
    padding: 4px 12px;
  }
  
  .todo-item {
    padding: 12px;
    gap: 8px;
  }
  
  .filter-section {
    margin: 8px;
    padding: 8px;
  }
  
  .todo-list {
    margin: 0 8px 12px;
    width: calc(100% - 16px);
  }
  
  .todo-text {
    font-size: 0.9rem;
    margin-bottom: 8px;
  }
  
  .todo-meta {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
  }
  
  .todo-meta :deep(.ant-tag) {
    padding: 4px 6px;
    font-size: 0.75rem;
  }
  
  .due-date {
    padding: 4px 6px;
    font-size: 0.75rem;
  }
  
  .todo-content {
    padding: 0 6px;
  }
  
  .todo-actions {
    margin-top: 8px;
    gap: 6px;
  }
  
  .edit-button, .delete-button {
    width: 32px;
    height: 32px;
  }
  
  .todo-order {
    gap: 2px;
  }
  
  .todo-number {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}

/* 平板设备优化 */
@media (min-width: 769px) and (max-width: 1024px) {
  .todo-container {
    padding: 0 20px;
    margin: 24px auto;
  }
  
  .card-title {
    padding: 24px 32px;
  }
  
  .title-text {
    font-size: 2rem;
  }
  
  .filter-section {
    margin: 24px 32px;
    padding: 20px;
  }
  
  .todo-list {
    margin: 0 32px 32px;
    width: calc(100% - 64px);
  }
  
  .todo-item {
    padding: 20px 24px;
  }
  
  .todo-meta {
    gap: 8px;
  }
}

/* 大屏幕优化 */
@media (min-width: 1440px) {
  .todo-container {
    max-width: 1400px;
  }
  
  .card-title {
    padding: 40px 48px;
  }
  
  .title-text {
    font-size: 2.75rem;
  }
  
  .filter-section {
    margin: 40px 48px;
    padding: 32px;
  }
  
  .todo-list {
    margin: 0 48px 48px;
    width: calc(100% - 96px);
  }
  
  .todo-item {
    padding: 28px 36px;
  }
  
  .todo-text {
    font-size: 1.2rem;
  }
  
  .todo-meta {
    gap: 12px;
  }
  
  .todo-meta :deep(.ant-tag) {
    font-size: 0.95rem;
    padding: 6px 14px;
  }
  
  .due-date {
    font-size: 0.95rem;
    padding: 6px 14px;
  }
}

/* 横屏模式优化 */
@media (max-height: 600px) and (orientation: landscape) {
  .todo-container {
    margin: 16px auto;
  }
  
  .card-title {
    padding: 16px 24px;
  }
  
  .title-text {
    font-size: 1.5rem;
  }
  
  .filter-section {
    margin: 16px 24px;
    padding: 16px;
  }
  
  .todo-list {
    margin: 0 24px 24px;
  }
  
  .todo-item {
    padding: 16px 24px;
  }
  
  .todo-meta {
    gap: 8px;
  }
}

/* 折叠屏设备优化 */
@media (max-width: 280px) {
  .todo-container {
    padding: 0 8px;
    margin: 8px auto;
  }
  
  .card-title {
    padding: 8px;
  }
  
  .title-text {
    font-size: 1.25rem;
  }
  
  .todo-count {
    font-size: 0.8rem;
    padding: 4px 8px;
  }
  
  .filter-section {
    margin: 8px;
    padding: 8px;
  }
  
  .todo-list {
    margin: 0 8px 8px;
  }
  
  .todo-item {
    padding: 8px;
  }
  
  .todo-meta {
    grid-template-columns: 1fr;
  }
  
  .todo-meta :deep(.ant-tag),
  .due-date {
    width: 100%;
    text-align: center;
    padding: 4px;
    font-size: 0.7rem;
  }
  
  .todo-actions {
    gap: 4px;
  }
  
  .edit-button, .delete-button {
    width: 28px;
    height: 28px;
  }
  
  .todo-number {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }
}

/* 触摸设备优化 */
@media (hover: none) {
  .todo-item:hover {
    transform: none;
  }
  
  .todo-meta :deep(.ant-tag:hover),
  .due-date:hover,
  .edit-button:hover,
  .delete-button:hover {
    transform: none;
  }
  
  .add-button:hover {
    transform: none;
  }
  
  .todo-item::before,
  .todo-meta :deep(.ant-tag)::before,
  .due-date::before,
  .edit-button::before,
  .delete-button::before {
    display: none;
  }
}

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .todo-card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }
  
  .todo-item {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  }
}

.stats-modal {
  :deep(.ant-modal-content) {
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff, #f0f7ff);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
  }

  :deep(.ant-modal-header) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 20px 24px;
    background: linear-gradient(135deg, #f0f7ff, #e3f2fd);
  }

  :deep(.ant-modal-title) {
    font-size: 1.5rem;
    font-weight: 600;
    background: linear-gradient(45deg, #1976d2, #2196f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  :deep(.ant-modal-body) {
    padding: 0;
    overflow-y: auto;
    flex: 1;
  }
}

.stats-container {
  padding: 20px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.stats-card {
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: none;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #2196f3, #1976d2);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stats-card:hover::before {
  opacity: 1;
}

.stats-card :deep(.ant-card-head) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  min-height: 48px;
}

.stats-card :deep(.ant-card-head-title) {
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(45deg, #1976d2, #2196f3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-card :deep(.ant-card-body) {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.stats-chart {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px;
  flex-wrap: wrap;
}

.progress-circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(
    #2196f3 calc(var(--percentage) * 1%),
    #e3f2fd calc(var(--percentage) * 1%)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.2);
  flex-shrink: 0;
}

.progress-circle::before {
  content: '';
  position: absolute;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #f0f7ff);
}

.progress-text {
  position: relative;
  font-size: 1.25rem;
  font-weight: 700;
  background: linear-gradient(45deg, #1976d2, #2196f3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stats-details {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
  min-width: 0;
}

.stats-detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  border-radius: 12px;
  transition: all 0.3s ease;
  min-width: 0;
  border: 1px solid rgba(33, 150, 243, 0.1);
}

.stats-detail-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);
  border-color: rgba(33, 150, 243, 0.2);
}

.stats-detail-label {
  font-size: 0.875rem;
  color: #666666;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}

.stats-detail-value {
  font-size: 1.1rem;
  font-weight: 600;
  background: linear-gradient(45deg, #1976d2, #2196f3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}

.priority-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.priority-bar-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.priority-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: #666666;
  padding: 0 4px;
}

.priority-label span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.priority-count {
  font-weight: 600;
  color: #1a1a1a;
  margin-left: 8px;
  flex-shrink: 0;
}

.priority-bar-wrapper {
  height: 20px;
  background: #f5f5f5;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.priority-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  transition: width 0.3s ease;
  min-width: 40px;
}

.priority-bar.high {
  background: linear-gradient(90deg, #ffebee, #ffcdd2);
}

.priority-bar.medium {
  background: linear-gradient(90deg, #fff3e0, #ffe0b2);
}

.priority-bar.low {
  background: linear-gradient(90deg, #e8f5e9, #c8e6c9);
}

.priority-bar-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}

.category-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.category-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  border-radius: 12px;
  transition: all 0.3s ease;
  min-width: 0;
  border: 1px solid rgba(33, 150, 243, 0.1);
}

.category-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);
  border-color: rgba(33, 150, 243, 0.2);
}

.category-name {
  font-size: 0.875rem;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}

.category-count {
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.category-percent {
  font-size: 0.75rem;
  color: #666666;
  margin-left: 4px;
}

.tag-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

.tag-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
  border-radius: 12px;
  transition: all 0.3s ease;
  min-width: 0;
  border: 1px solid rgba(33, 150, 243, 0.1);
}

.tag-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.1);
  border-color: rgba(33, 150, 243, 0.2);
}

.tag-name {
  font-size: 0.875rem;
  color: #666666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}

.tag-count {
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}

/* 响应式布局优化 */
@media (max-width: 768px) {
  .stats-container {
    padding: 16px;
  }

  .stats-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .stats-chart {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }

  .stats-details {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
  }

  .category-stats,
  .tag-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-container {
    padding: 12px;
  }

  .stats-cards {
    gap: 12px;
  }

  .stats-card :deep(.ant-card-head) {
    padding: 10px 12px;
  }

  .stats-card :deep(.ant-card-body) {
    padding: 12px;
  }

  .stats-details {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-stats,
  .tag-stats {
    grid-template-columns: 1fr;
  }

  .stats-detail-label {
    font-size: 0.8rem;
  }

  .stats-detail-value {
    font-size: 1rem;
  }

  .category-name,
  .tag-name {
    font-size: 0.8rem;
  }

  .category-count,
  .tag-count {
    font-size: 0.9rem;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .stats-modal {
    :deep(.ant-modal-content) {
      background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
    }

    :deep(.ant-modal-header) {
      background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
      border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    :deep(.ant-modal-title) {
      background: linear-gradient(45deg, #64b5f6, #2196f3);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .stats-card {
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
  }

  .stats-card :deep(.ant-card-head) {
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .stats-card :deep(.ant-card-head-title) {
    background: linear-gradient(45deg, #64b5f6, #2196f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .progress-circle::before {
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
  }

  .progress-text {
    background: linear-gradient(45deg, #64b5f6, #2196f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .stats-detail-item {
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
    border-color: rgba(33, 150, 243, 0.2);
  }

  .stats-detail-label {
    color: #999999;
  }

  .stats-detail-value {
    background: linear-gradient(45deg, #64b5f6, #2196f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .priority-label {
    color: #999999;
  }

  .priority-count {
    color: #ffffff;
  }

  .priority-bar-wrapper {
    background: rgba(255, 255, 255, 0.1);
  }

  .category-item,
  .tag-stat {
    background: linear-gradient(135deg, #2d2d2d, #1a1a1a);
    border-color: rgba(33, 150, 243, 0.2);
  }

  .category-name,
  .tag-name {
    color: #999999;
  }

  .category-count,
  .tag-count {
    color: #ffffff;
  }

  .category-percent {
    color: #999999;
  }
}
</style> 